<template>
  <div class="medical-report-container">
    <!-- 顶部导航栏 -->
    <nav class="header">
      <div class="nav-left">
        <el-icon class="back-arrow"><ArrowLeft /></el-icon>
      </div>
      <div class="nav-center">
        <span class="nav-item active">检查报告</span>
        <span class="nav-item">检验报告</span>
      </div>
      <div class="nav-right">
        <el-button @click="router.push('/LookCondition')" class="logout-btn" text>退出</el-button>
      </div>
    </nav>

    <!-- 报告主体区域 -->
    <main class="report-main">
      <div class="report-grid">
        <div 
          v-for="(report, index) in reports" 
          :key="index" 
          class="report-card"
        >
          <h3>{{ report.title }}</h3>
          <div class="timestamp">{{ report.timestamp }}</div>
          <el-button 
            class="view-btn" 
            @click="openPreview(report)"
          >
            查看&gt;
          </el-button>
        </div>
      </div>
    </main>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentReport?.title"
      width="60%"
    >
      <div class="preview-content">
        <img 
          :src="currentReport?.imageUrl" 
          alt="报告预览"
          class="preview-image"
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const dialogVisible = ref(false)
const currentReport = ref(null)

// 时间处理逻辑
const initialTime = new Date()
const fixedDate = computed(() => {
  return `${initialTime.getFullYear()}-${pad(initialTime.getMonth()+1)}-${pad(initialTime.getDate())}`
})
const elapsedSeconds = ref(0)
const initialTotalSeconds = initialTime.getHours() * 3600 + 
                           initialTime.getMinutes() * 60 + 
                           initialTime.getSeconds()

// 格式化动态时间
const dynamicTime = computed(() => {
  const total = initialTotalSeconds + elapsedSeconds.value
  const h = Math.floor(total / 3600) % 24
  const m = Math.floor((total % 3600) / 60)
  const s = total % 60
  return `更新于：${fixedDate.value} ${pad(h)}:${pad(m)}:${pad(s)}`
})

// 定时器
onMounted(() => {
  const timer = setInterval(() => {
    elapsedSeconds.value++
  }, 1000)
  onUnmounted(() => clearInterval(timer))
})

// 辅助函数
const pad = n => n.toString().padStart(2, '0')

// 报告数据
const reports = ref([
  {
    id: 1,
    title: '头部X线报告',
    timestamp: dynamicTime,
    imageUrl: 'public/static/imgs/head.png'
  },
  {
    id: 2,
    title: '心电图',
    timestamp: dynamicTime,
    imageUrl: 'public/static/imgs/R-C.png'
  },
  {
    id: 3,
    title: 'CT脑部',
    timestamp: dynamicTime,
    imageUrl: 'public/static/imgs/CTimg.png'
  },
  {
    id: 4,
    title: '超声报告',
    timestamp: dynamicTime,
    imageUrl: 'public/static/imgs/R-A.png'
  }
])

const openPreview = (report) => {
  currentReport.value = report
  dialogVisible.value = true
}
</script>

<style scoped>
/* 新增预览样式 */
.preview-content {
  text-align: center;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 调整对话框标题样式 */
:deep(.el-dialog__header) {
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  margin: 0;
  padding: 16px 20px;
}

:deep(.el-dialog__title) {
  color: #1a2b50;
  font-size: 18px;
}

.medical-report-container {
  min-height: 100vh;
  background: #f0fff4; /* 浅绿色背景 */
}

/* 顶部导航样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #ffe4e1; /* 浅粉色背景 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav-center {
  display: flex;
  gap: 40px;
}

.nav-item {
  font-size: 18px;
  color: #333;
  cursor: pointer;
  padding: 8px 16px;
  transition: all 0.3s;
}

.nav-item.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.back-arrow {
  font-size: 24px;
  cursor: pointer;
}

.logout-btn {
  color: #666;
  font-size: 16px;
}

/* 主体区域 */
.report-main {
  padding: 24px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 报告卡片 */
.report-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.report-card h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 12px;
}

.timestamp {
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}

.view-btn {
  align-self: flex-end;
  border: 1px solid #409eff;
  color: #409eff;
  border-radius: 20px;
  padding: 8px 24px;
  transition: all 0.3s;
}

.view-btn:hover {
  background: #409eff;
  color: white;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .report-grid {
    grid-template-columns: 1fr;
  }

  .header {
    padding: 12px;
  }

  .nav-center {
    gap: 20px;
  }

  .nav-item {
    font-size: 16px;
    padding: 4px 8px;
  }
}
</style>